<template>
    <div class="ibox-content">
        <h3>{{title}}</h3>
        <table class="footable table table-stripped toggle-arrow-tiny" data-limit-navigation="5">
            <thead id="testheader">
                <tr v-if="footype=='buildinfo'">
                    <th data-toggle="true">{{ cols[23] }}</th>
                    <th>{{ cols[1] }}</th>
                    <th>{{ cols[2] }}</th>
                    <th data-hide="all">{{ cols[41] }}</th>
                    <th data-hide="all">{{ cols[42] }}</th>
                    <th data-hide="all">{{ cols[3] }}</th>
                    <th data-hide="all">{{ cols[5] }}</th>
                    <th data-hide="all">{{ cols[6] }}</th>
                    <th data-hide="all">{{ cols[33] }}</th>
                    <th data-hide="all">{{ cols[34] }}</th>
                    <th data-hide="all">{{ cols[35] }}</th>
                    <th data-hide="all">{{ cols[36] }}</th>
                    <th data-hide="all">{{ cols[37] }}</th>
                    <th data-hide="all">{{ cols[40] }}</th>
                    <th data-hide="all">{{ cols[43] }}</th>
                    <th data-hide="all">{{ cols[31] }}</th>
                    <th data-hide="all">{{ cols[32] }}</th>
                    <th>{{ cols[4] }}</th>
                    <th>{{ cols[24] }}</th>
                </tr>
                <tr v-else-if="footype=='codecheck'">
                    <th data-toggle="true">{{ cols[23] }}</th>
                    <th>{{ cols[1] }}</th>
                    <th>{{ cols[2] }}</th>
                    <th data-hide="all">{{ cols[41] }}</th>
                    <th data-hide="all">{{ cols[42] }}</th>
                    <th data-hide="all">{{ cols[3] }}</th>
                    <th data-hide="all">{{ cols[5] }}</th>
                    <th data-hide="all">{{ cols[7] }}</th>
                    <th data-hide="all">{{ cols[8] }}</th>
                    <th data-hide="all">{{ cols[9] }}</th>
                    <th data-hide="all">{{ cols[10] }}</th>
                    <th data-hide="all">{{ cols[11] }}</th>
                    <th data-hide="all">{{ cols[12] }}</th>
                    <th data-hide="all">{{ cols[13] }}</th>
                    <th data-hide="all">{{ cols[14] }}</th>
                    <th data-hide="all">{{ cols[15] }}</th>
                    <th data-hide="all">{{ cols[16] }}</th>
                    <th data-hide="all">{{ cols[17] }}</th>
                    <th data-hide="all">{{ cols[18] }}</th>
                    <th data-hide="all">{{ cols[19] }}</th>
                    <th data-hide="all">{{ cols[20] }}</th>
                    <th data-hide="all">{{ cols[21] }}</th>
                    <th data-hide="all">{{ cols[22] }}</th>
                    <th data-hide="all">{{ cols[38] }}</th>
                    <th data-hide="all">{{ cols[39] }}</th>
                    <th>{{ cols[4] }}</th>
                    <th>{{ cols[24] }}</th>
                </tr>
                <tr v-else-if="footype=='autotest'">
                    <th data-toggle="true">{{ cols[23] }}</th>
                    <th>{{ cols[1] }}</th>
                    <th>{{ cols[25] }}</th>
                    <th data-hide="all">{{ cols[4] }}</th>
                    <th data-hide="all">{{ cols[28] }}</th>
                    <th data-hide="all">{{ cols[29] }}</th>
                    <th data-hide="all">{{ cols[30] }}</th>
                    <th>{{ cols[26] }}</th>
                    <th>{{ cols[27] }}</th>
                </tr>
                <tr v-else-if="footype=='release'">
                    <th data-toggle="true">{{ cols[23] }}</th>
                    <th>{{ cols[1] }}</th>
                    <th>{{ cols[2] }}</th>
                    <th data-hide="all">{{ cols[41] }}</th>
                    <th data-hide="all">{{ cols[42] }}</th>
                    <th data-hide="all">{{ cols[3] }}</th>
                    <th data-hide="all">{{ cols[5] }}</th>
                    <th data-hide="all">{{ cols[32] }}</th>
                    <th>{{ cols[4] }}</th>
                    <th>{{ cols[24] }}</th>
                </tr>
                <tr v-else>
                    <th data-toggle="true">{{ cols[23] }}</th>
                    <th>{{ cols[1] }}</th>
                    <th>{{ cols[2] }}</th>
                    <th data-hide="all">{{ cols[41] }}</th>
                    <th data-hide="all">{{ cols[42] }}</th>
                    <th data-hide="all">{{ cols[3] }}</th>
                    <th data-hide="all">{{ cols[5] }}</th>
                    <th>{{ cols[4] }}</th>
                    <th>{{ cols[24] }}</th>
                </tr>
            </thead>
            <tbody id="testfoo">
            </tbody>
            <tfoot>
            <tr>
                <td colspan="5">
                    <ul class="pagination float-right"></ul>
                </td>
            </tr>
            </tfoot>
        </table>
            <!-- FooTable -->
    <link href="css/plugins/footable/footable.core.css" rel="stylesheet">
    </div>
</template>

<script>
    export default {
        name: "footable",
        props:{
            cols: Array,
            title: String,
            table_data: Array,
            keys: Array,
            footype: String
        },
        methods:{
            update_data:function(data,init){
                var h="";
                var tbody_index = Array
                if (this.footype == 'buildinfo'){
                    tbody_index = [23, 1, 2, 41, 42, 3, 5, 6, 33, 34, 35, 36, 37, 40, 43, 31, 32, 4, 24]
                    for (var j=0;j<data.length;j++){
                        h+="<tr>";
                        for(var i=0;i<tbody_index.length;i++){
                            h += "<td>" + data[j][this.keys[tbody_index[i]]] + "</td>";
                        }
                        h += "</tr>";
                    }
                }
                else if (this.footype == 'codecheck'){
                    tbody_index = [23, 1, 2, 41, 42, 3, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 38, 39, 4, 24]
                    for (var j=0;j<data.length;j++){
                    h+="<tr>";
                    for(var i=0;i<tbody_index.length;i++){
                        h += "<td>" + data[j][this.keys[tbody_index[i]]] + "</td>";
                    }
                    h += "</tr>";
                    }
                }
                else if (this.footype == 'autotest'){
                    tbody_index = [23, 1, 25, 4, 28, 29, 30, 26, 27]
                    for (var j=0;j<data.length;j++){
                    h+="<tr>";
                    for(var i=0;i<tbody_index.length;i++){
                        h += "<td>" + data[j][this.keys[tbody_index[i]]] + "</td>";
                    }
                    h += "</tr>";
                    }
                }
                else if (this.footype == 'release'){
                    tbody_index = [23, 1, 2, 41, 42, 3, 5, 32, 4, 24]
                    for (var j=0;j<data.length;j++){
                        if (data[j][this.keys[tbody_index[4]]] === "submit-build") {
                            continue
                        } else if (data[j][this.keys[tbody_index[4]]] === "verify-build") {
                            continue
                        }
                        h+="<tr>";
                        for(var i=0;i<tbody_index.length;i++){
                            h += "<td>" + data[j][this.keys[tbody_index[i]]] + "</td>";
                        }
                        h += "</tr>";
                    }
                }
                else{
                    tbody_index = [23, 1, 2, 41, 42, 3, 5, 4, 24]
                    for (var j=0;j<data.length;j++){
                        h+="<tr>";
                        for(var i=0;i<tbody_index.length;i++){
                            h += "<td>" + data[j][this.keys[tbody_index[i]]] + "</td>";
                        }
                        h += "</tr>";
                    }
                }
                $("#testfoo").html(h);
                if (init){
                    $('.footable').footable();
                } else {
                    $(".footable").trigger('footable_redraw')
                }
                
            }
        },
        mounted(){
            this.update_data(this.table_data,true);   
        }
    }
</script>

<style scoped>

</style>
